<template>
  <dw-page-warpper element-loading-text="页面加载中...">
    <el-tabs v-model="activeName" class="paramter-tabs">
      <el-tab-pane v-for="(item, index) in migrationList" :key="index" :label="item.label" :name="item.value">
        <project-data-init v-if="item.value === '01'"></project-data-init>
        <project-data-clone v-else-if="item.value === '02'"></project-data-clone>
        <project-data-export v-else-if="item.value === '03'"></project-data-export>
        <project-data-import v-else-if="item.value === '04'"></project-data-import>
      </el-tab-pane>
    </el-tabs>
  </dw-page-warpper>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import ProjectDataInit from './components/project-data-init.vue';
import ProjectDataClone from './components/project-data-clone.vue';
import ProjectDataExport from './components/project-data-export.vue';
import ProjectDataImport from './components/project-data-import.vue';
defineOptions({
  name: 'ProjectDataMigration',
});

const activeName = ref<string>('01');
const migrationList = [
  {
    label: '项目数据初始化',
    value: '01',
  },
  {
    label: '项目数据克隆',
    value: '02',
  },
  {
    label: '项目数据导出',
    value: '03',
  },
  {
    label: '项目数据导入',
    value: '04',
  },
];

watch(
  () => activeName.value,
  (newValue) => {
    console.log(newValue);
  },
);
</script>
<style lang="scss" scoped>
.paramter-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
  height: 100%;
}
.paramter-tabs :deep(.el-tabs__nav) {
  padding: 0 20px;
}
.paramter-tabs :deep(.el-form-item) {
  margin: 8px 0px;
}
.remove {
  cursor: pointer;
  color: var(--el-color-primary);
  font-weight: bold;
  font-size: 18px;
}
.remove:hover {
  cursor: pointer;
  color: red;
}
</style>
